// @ts-ignore
import { ProList } from '@ant-design/pro-components';
// @ts-ignore
import { Space, Tag } from 'antd';
// @ts-ignore
import React, {useEffect} from 'react';

interface IProps {
  bookCommentList: API.BookComment;
}


// type DataItem = (typeof defaultData)[number];

const CommentBox: React.FC<IProps> = ({bookCommentList}) => {

  let CommentList = bookCommentList.data
  useEffect(() => {
    CommentList = bookCommentList.data
  }, []);

  type DataItem = (typeof CommentList)[number]

  return (
    <ProList<DataItem>
      rowKey="id"
      headerTitle="评论区"
      dataSource={CommentList}
      showActions="hover"
      editable={{
        onSave: async (key, record, originRow) => {
          console.log(key, record, originRow);
          return true;
        },
      }}
      // onDataSourceChange={setDataSource}
      metas={{
        title: {
          dataIndex: 'name',
        },
        avatar: {
          dataIndex: 'picture',
          editable: false,
        },
        description: {
          dataIndex: 'content',
        },
        subTitle: {
          dataIndex: 'score',
          render: (text) => {
            return (
              <Space size={0}>
                <Tag color="#5BD8A6">{text}</Tag>
              </Space>
            );
          },
        },
        // actions: {
        //   render: (text, row, index, action) => [
        //     <a
        //       onClick={() => {
        //         action?.startEditable(row.id);
        //       }}
        //       key="link"
        //     >
        //       编辑
        //     </a>,
        //   ],
        // },
      }}
    />
  );
};
export default CommentBox
